<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <p>姓: <input type="text" v-model="firstname"></p>
            <p>名: <input type="text" v-model="lastname"></p>
        </div>
        <div>
            {{ fullname }}<br/>
            {{ fullname }}<br/>
            {{ fullname }}<br/>
            {{ fullname }}<br/>
        </div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    // 计算属性的特点
    //      1.0 一旦计算完成，返回结果之后，这个结果会被缓存，下次再使用时，不会重新计算
    //      2.0 凡是在计算属性中用到的数据都是这个计算属性的缓存依赖项
    //      3.0 一旦依赖项发生改变，计算属性会重新执行自己的逻辑代码，并且将执行后得到的结果再次缓存
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: 'x',
            lastname: 'jj'
        },
        computed: {
            fullname () {
                console.log(1111)
                return this.firstname + this.lastname
            }
        }
    })
</script>
</html>